<!-- 
app 页面
 -->
<template>
	<view class="pastRecords">
		<cu-custom bgColor="bg-white" :customShow="true" :isBack="true" class="cu-header">
			<template #backText></template>
			<template #content>
				<view class="im-flex im-justify-content-center im-align-items-center">
					<statusPoint v-if="is_group==0 && contact.is_online==1 && globalConfig.chatInfo.online==1"
						type="success"></statusPoint><text class="text-overflow">{{contact.displayName}}</text>
					<!-- 	<text v-if="is_group">({{groupInfo.groupUserCount}})</text> -->
				</view>
			</template>
		</cu-custom>
		<scroll-view class="scrollView" :scroll-top="DH" ref="scrollView" scroll-y="true" :scroll-anchoring="true"
			@scroll="scrollChat" :style="'height:'+(scrollH+40)+'rpx;overflow-anchor:auto;'">
			<view class="cu-chat" :style="{paddingBottom:paddingB+'px'}" @click="touchstart" id="more-oprate">
				<uni-load-more :status="loading"></uni-load-more>
				<template v-for="(item,index) in messageList" :key="index" :id="'chatItem_'+index">
					<view class="cu-info" v-if="item.type=='event'">{{item.content}} <text class="c-primary"
							v-if="item.is_undo==1 && (getTime() - item.sendTime) < 120000"
							@tap="reEdit(item.oldContent ?? '')">重新编辑</text></view>
					<template v-else>
						<view class="cu-item"
							:class="[item.fromUser.id==user.user_id ? 'im-rows-reverse self im-justify-content-start' : '' ]">
							<im-user :info="item.fromUser" :profile="isProfile" v-if="item.type!='system'"
								@longpress="at(item.fromUser)"></im-user>
							<view class="main im-wrap" @touchstart="moreOption($event,item)" @touchmove="ListTouchMove"
								@touchend="endTimer" style="position: relative;"><!-- 摘除双击 @tap="dblclick(item)" -->
								<view class="f-12 c-666" style="width:100%;min-height: 26rpx;margin-bottom: 6rpx;">
									<!-- 是否显示的判断  v-if="item.fromUser.id!=user.user_id" -->
									<!-- {{item.fromUser.realname}} -->
								</view>
								<!-- 文字消息 -->
								<view class="content"
									:class="[item.fromUser.id==user.user_id ? 'bg-light-green' : 'radius' ]"
									v-if="item.type=='text'">
									<mp-html container-style="overflow: hidden;display:inline;white-space: pre-wrap"
										:content="emojiToHtml(item.content)" />
								</view>
								<!-- 图片消息 -->
								<template v-else-if="item.type=='image'">
									<template v-if='item.extends && item.extends.fixMode'>
										<image v-if="item.extends.fixMode<=2" lazy-load :src="item.content"
											class="img_radius"
											:mode="item.extends.fixMode==1 ? 'widthFix' : 'heightFix' "
											:style="item.extends.fixMode==1 ? 'width:200px' : ''" @tap="showImgs"
											:data-img="item.content"></image>
										<image v-if="item.extends.fixMode==3" lazy-load :src="item.content"
											class="img_radius" mode="scaleToFill"
											:style="[{width:item.extends.width+'px',height:item.extends.height+'px'}]"
											@tap="showImgs" :data-img="item.content"></image>
									</template>
									<template v-else>
										<image :src="item.content" lazy-load class="img_radius" mode="heightFix"
											@tap="showImgs" :data-img="item.content"></image>
									</template>
								</template>

								<!-- 表情消息 -->
								<template v-else-if="item.type=='emoticon'">
									<image :src="item.content" class="emoticon" mode="widthFix"></image>
								</template>

								<!-- 语音消息 -->
								<view v-else-if="item.type=='voice'"
									class="im-voice-msg im-flex im-rows im-nowrap im-align-items-center radius-20"
									:class="[index == playIndex ? 'linear-green' : '', item.fromUser.id==user.user_id ? 'im-rows-reverse' : '' , ]"
									:data-voice="item.content" :data-index='index' @tap='playVoice'
									:style="{'width':(item.extends.duration*3)+'px'}">
									<text class="f-16 cuIcon-subscription rotate45"
										:class="[index == playIndex ? 'c-white' : '',item.fromUser.id==user.user_id ? 'rotate225' : '']"></text>
									<text class="im-voice-msg-text"
										:class="[index == playIndex ? 'c-white' : '']">{{item.extends.duration}}
										"</text>
								</view>
								<!-- 视频消息 -->
								<view v-else-if="item.type=='video'">
									<view class="course-video radius-10" @tap="handlePlay(item)">
										<!-- 播放弹层 -->
										<view class="relative-shadow">
											<view class="cuIcon-video icon-center f-28 c-white"></view>
										</view>
										<image v-if="item.extends" lazy-load :src="item.extends.poster" class=""
											mode="aspectFill">
										</image>
									</view>
								</view>
								<!-- 文件消息 -->
								<view v-else-if="item.type=='file'">
									<view
										class="file-card bg-white radius-10 im-flex im-justify-content-start pd-10 im-align-items-center"
										@tap.stop="preview(item)">
										<image :src="item.extUrl" style="width:64rpx;height:80rpx"></image>
										<view class="im-flex im-columns ml-10">
											<view class="text-overflow file-name">{{item.fileName}}</view>
											<view class="text-gray file-size f-12">{{fileSize(item.fileSize)}}</view>
										</view>
									</view>
								</view>
								<!-- 音视频消息 -->
								<view v-else-if="item.type=='webrtc'" @tap="calling(item.extends.type)"
									class="im-voice-msg im-flex im-rows im-nowrap im-align-items-center radius-20"
									:class="[item.fromUser.id==user.user_id ? 'im-rows-reverse' : '' , ]">
									<text class="f-16"
										:class="[item.extends.type == 1 ? 'cuIcon-record' : 'cuIcon-dianhua',item.fromUser.id==user.user_id ? 'rotate180' : '']"></text>
									<text class="im-voice-msg-text">{{item.content}}</text>
								</view>
								<!-- 系统消息 -->
								<view v-else-if="item.type=='system'">
									<p class="system">{{item.content}}</p>
								</view>
								<!-- 其他消息 -->
								<imItem v-else :item="item" :index="index" :isSelf="true"></imItem>
								<!-- 复制收藏框 -->
								<view :class="['functional',{'show':PopupId==item.id},
								{'BottomLeft':(!topY)&&item.fromUser.id==user.user_id},
								{'BottomRight':(!topY)&&item.fromUser.id!=user.user_id},
								{'TopLeft':topY&&item.fromUser.id==user.user_id},
								{'TopRight':topY&&item.fromUser.id!=user.user_id}]" @click.stop>
									<span v-if="item.type=='text'" @click="copyMsg">复制</span>
									<span v-if="item.type=='emoticon'" @click="collect">收藏</span>
								</view>
							</view>
							<view class="mt-10 f-20" v-if="item.fromUser.id==user.user_id">
								<view class="cuIcon-icloading icon-spin c-999" v-if="item.status=='going'"></view>
								<view class="cuIcon-infofill c-red" v-if="item.status=='failed'" @tap="reSend(item)">
								</view>
							</view>
							<view class="date" v-if="item.type!='system'">
								<text v-if="item.is_group==0 && item.fromUser.id==user.user_id"
									:class="item.is_read ? 'c-success' : 'c-gray'">{{item.is_read ? "已读" : "未读"}}</text>
								{{sendTime(item.sendTime)}}
							</view>
						</view>
					</template>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	import imInput from '@/components/message/im-input.vue';
	import imItem from '@/components/message/im-item.vue';
	import statusPoint from '@/components/status.vue';
	import imUser from '@/components/im-user.vue';
	import emoji from '@/utils/emoji.js'
	import {
		useloginStore
	} from '@/store/login';
	import {
		useMsgStore
	} from '@/store/message';
	import {
		storeToRefs
	} from 'pinia';
	import pinia from '@/store/index'
	const msgStore = useMsgStore(pinia)
	const {
		contacts,
		newMessage,
		getContact,
		appendMsg,
		checkMsg
	} = storeToRefs(msgStore);
	const userStore = useloginStore(pinia)
	const loginStore = useloginStore(pinia)
	const {
		ImgList
	} = storeToRefs(userStore);
	const getTime = () => {
		return new Date().getTime();
	};
	export default {
		components: {
			imInput,
			imItem,
			imUser,
			statusPoint
		},
		data() {
			return {
				DH: 0,
				directional: 1,
				is_first: 1,
				up_page: 1,
				down_page: 1,
				distance: 0, //进入加载状态后移动的距离
				downFlag: true, //是否还有下一页
				upFlag: true, //是否还有上一页
				topFlag: true, //限制触顶运行1次
				bottomFlag: true, //限制触低运行1次
				boxHeight: 0,
				youID: '',
				msgs: contacts,
				PopupId: '', //信息长按弹出使用id
				windowHeight: '',
				windowWidth: '',
				pageX: '',
				topY: false,
				user: userStore.userInfo,
				contact: {},
				is_group: 0,
				boxStatus: 0,
				paddingT: 0,
				video: '',
				videoUrl: '',
				InputBottom: 0,
				player: null,
				playIndex: -1,
				fileExt: [],
				emojiMap: [],
				page: 1,
				limit: 20,
				moreData: true, //是否有更多数据
				newMessage: newMessage,
				messageList: [],
				newheight: 0,
				scrollTop: 0,
				loading: 'more',
				loadLock: false,
				scrollHeight: 0,
				paddingB: 0,
				contact_id: 0,
				bottomHeight: 50,
				globalConfig: userStore.globalConfig,
				modelName: '',
				curMsg: '',
				isSending: false,
				copyTxt: '文本',
				wsData: null,
				timer: null,
				lastTapDiffTime: 0,
				isProfile: false,
				islongPress: false,
				listTouchStart: 0,
				groupInfo: [],
				atMsgList: [],
				atCount: 0,
				last_id: '',
			};
		},
		computed: {
			online() {
				return (this.msgs.filter(val => val.user_id == this.youID))[0].is_online
			},
			scrollH: function() {
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750 / winWidth;
				let bottomHeight = uni.upx2px(100);
				this.bottomHeight = bottomHeight;
				const query = this.getQuery();

				setTimeout(() => {
					query.select('.cu-header').boundingClientRect();
					query.exec(data => {
						this.paddingT = data[0].height;
					});
				}, 10)
				// #ifdef H5
				let winHeight = parseInt((sys.windowHeight - this.navBarHeight - this.paddingT) * winrate);
				// #endif

				// #ifdef APP-PLUS
				let winHeight = parseInt((sys.windowHeight - (this.inlineTools + this.paddingT + bottomHeight)) *
					winrate);
				// #endif

				// #ifndef H5 || APP-PLUS
				this.bottomHeight += this.inlineTools;
				// 微信小程序需要减去状态栏+底部导航栏+底部横线
				let winHeight = parseInt((sys.windowHeight - (this.inlineTools + this.paddingT + this.navBarHeight)) *
					winrate)
				// #endif

				return winHeight
			}
		},
		watch: {
			newMessage(val) {
				if (val.toContactId == this.contact.id && val.fromUser.id != this.user.user_id) {
					this.$api.msgApi.setMsgIsRead({
						toContactId: this.contact.id,
						is_group: this.contact.is_group,
						messages: val,
						fromUser: val.fromUser.id,
					});
				}
				// this.scrollToBottom();
			}
		},
		onReady() {
			uni.createSelectorQuery().selectAll('.scrollView').boundingClientRect(data => {
				this.boxHeight = data[0].height
			}).exec()
		},
		onLoad(options) {
			this.last_id = options.last_id
			let data = msgStore.getContact(options.id);
			this.youID = data.user_id
			if (data.is_group == 1 && (data.role < 3 || data.setting.profile == '1')) {
				this.isProfile = true;
			}
			this.contact = data;
			this.contact_id = options.id;
			this.is_group = data.is_group;
			this.getMessageList();


			// this.scrollToBottom()
		},
		created: function() {
			innerAudioContext.onPlay(() => {
				console.info('play');
			});
			innerAudioContext.onEnded(() => {
				innerAudioContext.stop();
				this.playIndex = -1;
				// console.info('播放完毕，继续播放下一个录音！');
				// var cIndex     = Number(this.playIndex);
				// for(let i = cIndex + 1; i < this.messageList.length; i++) {
				// 	if (this.messageList[i].type == 'voice') {
				// 		this.playNow(this.messageList[i].content, i);
				// 		break;
				// 		return;
				// 	}
				// }
				// // 如果播放到最后一个,播放结束
				// if(this.messageList.length <= cIndex + 1){
				// 	innerAudioContext.stop();
				// 	this.playIndex = -1;
				// }
			});
			innerAudioContext.onError((E) => {
				console.info(E);
			});
		},
		methods: {
			collect() {
				this.PopupId = ""
				this.$httpRequest('/api/upload/collectImg', {
					file_id: this.curMsg.file_id
				}).then(res => {
					if (res) {
						this.$method.hint('收藏成功')
						this.$httpRequest('/api/upload/getCollectImgList').then(res => {
							loginStore.setImgList(res.data);
						})
					}
				})
			},
			touchstart() {
				this.PopupId = ""
			},
			closeAtModel() {
				this.modelName = '';
				let msgAt = msgStore.msgAt;
				let curAt = this.atCount;
				this.$api.msgApi.readAtMsg({
					toContactId: this.contact_id
				}).then(res => {
					if (res.code == 200) {
						msgStore.msgAt = msgAt - curAt;
						msgStore.updateContacts({
							id: this.contact_id,
							is_at: 0
						})
						this.atCount = 0;
					}
				})
			},
			getQuery() {
				// #ifdef MP
				const query = uni.createSelectorQuery().in(this);
				// #endif

				// #ifndef MP
				const query = uni.createSelectorQuery();
				// #endif
				return query;
			},
			calling(type) {
				this.$refs.imInput.calling(parseInt(type));
			},
			endTimer() {
				clearTimeout(this.timer);
				setTimeout(() => {
					this.islongPress = false
				}, 200)

			},
			// 双击
			dblclick(item) {
				const _this = this;
				// 当前时间
				const curTime = new Date().getTime();
				// 上次点击时间
				const lastTime = _this.lastTapDiffTime;
				// 更新上次点击时间
				_this.lastTapDiffTime = curTime;
				// 两次点击间隔小于300ms, 认为是双击
				const diff = curTime - lastTime;
				if (diff < 300) {
					this.curMsg = item;
					this.modelName = 'copyModel';
				}
			},
			getTime() {
				return new Date().getTime();
			},
			setPad(padding) { //设置聊天内容的地步边距
				this.paddingB = padding;
				// this.scrollToBottom();
			},
			// 获取群聊信息
			getGroupInfo() {
				this.$api.msgApi.groupInfo({
					group_id: this.contact_id,
				}).then(res => {
					this.groupInfo = res.data;
				})
			},
			updateMessage(message) {
				let msgList = this.messageList;
				// 更新联系人
				msgList.forEach((item, index) => {
					let msg = msgList[index];
					if (item.id == message.id) {
						msgList[index] = Object.assign(msg, message);
					}
				})
				this.messageList = msgList;
			},
			getScrollHeight(ins) {
				const query = this.getQuery();
				setTimeout(() => {
					query.select('.cu-chat').boundingClientRect();
					query.exec(data => {
						if (this.directional == 0) {
							this.DH = data[0].height - this.scrollHeight - this.distance
							this.distance = 0
						}
						this.scrollHeight = data[0].height;
						this.scrollTop = data[0].height - this.newheight;
						this.loadLock = false;
					});
				}, 10)
			},
			scrollChat(e) {
				if (this.loading == 'loading') {
					this.distance += e.detail.deltaY
				}
				this.newheight = e.detail.scrollHeight;
				if (e.detail.scrollTop < 10) {
					if (this.topFlag && this.upFlag && this.is_first == 0) {
						this.loading = 'loading';
						this.topFlag = false
						this.directional = 0
						this.getMessageList();
					}
				} else if (e.detail.scrollTop > (e.detail.scrollHeight - (this.boxHeight + 150))) {
					if (this.bottomFlag && this.downFlag) {
						this.bottomFlag = false
						this.directional = 1
						this.getMessageList();
					}
				} else {
					this.is_first = 0
					this.topFlag = true
					this.bottomFlag = true
				}
			},
			getMessageList() {
				this.$httpRequest('/api/im/getMessageRecord', {
					msg_id: this.last_id,
					toContactId: this.contact.id,
					limit: this.limit,
					directional: this.directional,
					is_first: this.is_first,
					up_page: this.up_page,
					down_page: this.down_page,
				}).then(res => {
					let data = res.data.data

					if (this.directional == 1) {
						data.forEach(it => {
							this.messageList.push(it)
						})
					} else {
						this.loading = 'more';
						data.forEach(it => {
							this.messageList.unshift(it)
						})
					}

					var _this = this;


					if (this.directional == 1) {
						if (res.data.current_page >= res.data.last_page) {
							this.downFlag = false
						} else {
							this.down_page++
						}
					} else {
						if (res.data.current_page >= res.data.last_page) {
							this.upFlag = false
							this.moreData = false
							this.loading = 'noMore'
						} else {
							this.up_page++
						}
					}
					this.$nextTick(() => {
						this.DH = 200
					});
					// 	if (this.page == 1) {
					// 		this.scrollToBottom();
					// 	} else {
					this.getScrollHeight(this.directional);
					// 	}
				})
			},
			moreOption(e, item) {
				this.timer = setTimeout(() => {
					this.curMsg = item;
					if (item.type == "text") {
						this.copyTxt = "消息";
					} else if (item.type == "emoticon") {
						this.copyTxt = "表情";
					} else {
						return
					}
					// 如果长按后没有移动才是长按事件
					if (this.islongPress != 'move') {
						if (e.touches[0].pageX > this.windowWidth / 5 && e.touches[0].pageX < this.windowWidth *
							0.66) {
							this.pageX = e.touches[0].pageX + 'px'
						} else if (e.touches[0].pageX <= this.windowWidth / 5) {
							this.pageX = this.windowWidth / 5 + 'px'
						} else if (e.touches[0].pageX >= this.windowWidth * 0.66) {
							this.pageX = this.windowWidth * 0.66 + 'px'
						} else {
							this.pageX = this.windowWidth / 5 + 'px'
						}
						if (e.touches[0].pageY >= this.windowHeight * 0.65) {
							this.topY = true
						} else {
							this.topY = false
						}
						this.curMsg = item
						this.PopupId = item.id
					}
				}, 1000); // 设置为 1 秒
			},
			ListTouchMove(e) {
				this.islongPress = 'move';
			},
			undoMsg() {
				let message = this.curMsg;
				this.modelName = '';
				this.$api.msgApi.undoMessage({
						id: message.id
					})
					.then(res => {
						const data = {
							id: message.id,
							type: "event",
							is_undo: 1,
							content: '你撤回了一条消息',
							oldContent: message.content,
							toContactId: message.toContactId,
						};
						this.updateMessage(data);
					})

			},
			copyMsg() {
				var regex = /<[^>]+>/g; // 定义正则表达式，匹配所有的HTML标签
				let content = this.curMsg.content.replace(regex, ''); // 将匹配到的HTML标签替换为空字符串
				uni.setClipboardData({
					data: content,
					showToast: true
				});
				// this.modelName = '';
				this.curMsg = {};
				this.PopupId = ""
			},
			// 转发消息
			forwardMsg() {
				uni.navigateTo({
					url: '/pages/index/userSelection?contact_id=' + this.contact_id + '&type=3'
				})
			},
			reEdit(text) {
				this.$refs.imInput.inputMsg = text;
				this.$refs.imInput.isFocus = true;
			},
			// 滚动到页面底部
			scrollToBottom() {
				const query = this.getQuery();
				setTimeout(() => {
					query.select('.cu-chat').boundingClientRect();
					query.exec(data => {
						let height = 999999;
						if (data[0]) {
							height = data[0].height;
						}
						this.scrollTop = height + 3000;
					});
				}, 10);
			},
			// 打开聊天详情
			openDetails() {
				uni.navigateTo({
					url: "/pages/message/detail?id=" + this.contact.id + "&is_group=" + this.contact.is_group
				})
			},
			fileSize(size) {
				return this.$util.getFileSize(size);
			},
			// 重新发送
			reSend(message) {
				message.status = 'going';
				this.sendMessage(JSON.parse(JSON.stringify(message)), '');
			},
			// 发送消息
			sendMessage(message, file) {
				// 如果开启了群聊禁言或者关闭了单聊权限，就不允许发送消息
				if ((!this.globalConfig.chatInfo.simpleChat && this.is_group == 0) || !this.nospeak()) {
					//已开启禁言
					uni.showToast({
						title: '系统已关闭单聊，或者群已开启禁言，无法发送消息',
						icon: "none"
					})
					return;
				}
				let user = this.user;
				user.id = user.user_id;
				message.fromUser = user;
				message.from_user = this.user.user_id;
				message.toContactId = this.contact.id;
				message.is_group = this.contact.is_group;
				this.messageList.push(message);
				// this.scrollToBottom();
				var fileTypes = ["image", "file", "video", 'voice'];
				if (message.type == 'text' || message.type == 'emoticon') {
					this.$api.msgApi.sendMessage(message)
						.then((res) => {
							if (res.code == 200) {
								this.updateMessage(res.data);
							} else if (res.code == 401) {
								// 删除最后一条信息
								this.messageList.pop();
								//已开启禁言
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						})
						.catch((error) => {
							this.sendFailed(message);
						});
				} else if (fileTypes.includes(message.type)) {
					var self = this;
					if (message.fileSize > 10240000) {
						return uni.showToast({
							title: '文件大小不能超过10M',
							icon: 'error'
						})
					}
					uni.uploadFile({
						url: this.$api.msgApi.uploadUrl,
						filePath: message.content,
						name: 'file',
						header: {
							'Authorization': uni.getStorageSync('authToken'),
						},
						formData: {
							message: JSON.stringify(message)
						},
						success: (e) => {
							let res = JSON.parse(e.data);
							if (res.code == 200) {
								this.updateMessage(res.data);
								console.log(res.data)
							} else if (res.code == 401) {
								// 删除最后一条信息
								this.messageList.pop();
								//已开启禁言
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						},
						fail: (res) => {
							this.sendFailed(message);
						}
					})
				}

			},
			sendFailed(message) {
				message.status = 'failed';
				this.updateMessage(JSON.parse(JSON.stringify(message)));
			},
			// 播放视频,禁止多个同时播放
			handlePlay(item) {
				uni.navigateTo({
					url: '/pages/message/video?name=' + item.fileName + '&src=' + encodeURI(item.content),
					animationType: "slide-in-bottom"
				});
			},
			// 自动解析消息中的表情
			emojiToHtml(str) {
				let emojiMap = this.emojiMap;
				return str.replace(/\[!(\w+)\]/gi, function(str, match) {
					var file = match;
					return emojiMap[file] ? "<img class='mr-5' style=\"width:18px;height:18px\" emoji-name=\""
						.concat(match, "\" src=\"").concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
				});
			},
			sendTime: function(mstime) {
				return this.$util.timeFormat(mstime);
			},
			// 播放语音
			playVoice: function(e) {
				var voicelUrl = e.currentTarget.dataset.voice;
				var index = e.currentTarget.dataset.index;
				if (this.playIndex == -1) {
					return this.playNow(voicelUrl, index);
				}
				if (this.playIndex == index) {
					innerAudioContext.stop();
					this.playIndex = -1;
				} else {
					innerAudioContext.stop();
					this.playIndex = -1;
					this.playNow(voicelUrl, index);
				}
			},
			// 语音播放基础函数
			playNow: function(voicelUrl, index) {
				this.playIndex = index;
				innerAudioContext.autoplay = true;
				innerAudioContext.src = voicelUrl;
				innerAudioContext.play();
				return true;
			},
			// 文件预览
			preview(item) {
				if (this.islongPress) {
					return;
				}
				let audioExt = ['mp3', 'wav', 'acc'];
				let extension = item.content.split('.').pop().toLowerCase();
				if (audioExt.includes(extension)) {
					uni.navigateTo({
						url: '/pages/mine/webview?src=' + encodeURIComponent(item.preview),
						animationType: "slide-in-bottom"
					});
					return;
				}
				// #ifdef APP-PLUS || MP-WEIXIN
				let exts = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
				if (exts.includes(extension)) {
					uni.showLoading({
						title: '文件加载中'
					});
					uni.downloadFile({
						url: item.content,
						success: function(res) {
							uni.hideLoading();
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.info('打开文档成功');
								}
							});
						},
						fail() {
							uni.hideLoading();
						}
					});
				} else {
					uni.showToast({
						title: '该文件不支持预览！',
						icon: 'none'
					})
				}
				// #endif

				// #ifdef H5
				const tempLink = document.createElement("a");
				tempLink.style.display = "none";
				tempLink.href = item.download;
				tempLink.setAttribute("download", item.fileName);
				tempLink.setAttribute("target", "_blank");
				document.body.appendChild(tempLink);
				tempLink.click();
				document.body.removeChild(tempLink);
				// #endif
			},
			// 图片预览
			showImgs: function(e) {
				var imgs = [];
				var imgsCurrent = e.currentTarget.dataset.img;
				for (var i = 0; i < this.messageList.length; i++) {
					if (this.messageList[i].type == 'image') {
						imgs.push(this.messageList[i].content);
					}
				}
				uni.previewImage({
					urls: imgs,
					current: imgsCurrent
				});
			},
			// 如果点击了聊天记录列表页,需要收起表情面板或者其他的面板
			closeInput(e) {
				this.boxStatus++;
			},
			// 禁言时禁止发送消息
			nospeak() {
				if (this.is_group == 1 && this.groupInfo.setting.nospeak > 0) {
					if (this.groupInfo.setting.nospeak == 1 && this.contact.role == 2) {
						return true;
					} else if (this.groupInfo.setting.nospeak == 2 && this.contact.role == 1) {
						return true;
					} else {
						return false;
					}
				} else {
					return true;
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		// padding-bottom: 100upx;
	}

	.OnlineNo {
		width: 100%;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		line-height: 24rpx;

		&>p {
			transform: translateY(-16rpx);
			z-index: 102;
			display: flex;
			align-items: center;
			justify-content: center;

			&>i {
				width: 16rpx;
				height: 16rpx;
				background-color: #FF5E03;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			&>.online {
				background-color: #4cd964;
			}
		}
	}

	.system {
		width: 100vw;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		color: #8799a3;
		position: absolute;
		left: 0upx;
	}

	.cu-chat .cu-item {
		.emoticon {
			width: 250rpx;
			border-radius: 20rpx;
		}
	}

	.cu-chat {
		min-height: calc(100% - 300px);
		position: relative;

		.TopRight {
			bottom: calc(100% - 32rpx);
			right: 0;
			transform: translateX(50%);
		}

		.TopLeft {
			bottom: calc(100% - 32rpx);
			left: 0;
			transform: translateX(-50%);
		}

		.BottomRight {
			bottom: 0%;
			right: 0;
			transform: translate(50%, 100%);
		}

		.BottomLeft {
			bottom: 0%;
			left: 0;
			transform: translate(-50%, 100%);
		}

		.show {
			width: auto !important;
			height: 60rpx !important;
		}

		.functional {
			width: 0rpx;
			height: 0rpx;
			overflow: hidden;
			background-color: #333333;
			color: #fff;
			border-radius: 10rpx;
			position: absolute;
			transition: all .3s;
			z-index: 9999;
			display: flex;

			&>span {
				width: 100rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.cu-chat .cu-item.self {
		justify-content: flex-start;
		text-align: right;
	}

	.bg-light-green {
		background-color: #FF6403;
		color: #fff;
	}

	.at-fixed-item {
		position: fixed;
		right: 20rpx;
		bottom: 120rpx;
		background-color: #fff;
		border-radius: 30rpx;
		color: #18bc37;
		padding: 12rpx 18rpx
	}

	.im {
		padding: 30rpx;
	}

	.im-system-msg {
		color: #FFFFFF;
		font-size: 26rpx;
		line-height: 38rpx;
		padding: 5px 10px;
		display: block;
		border-radius: 6rpx;
	}

	.im-msg {
		margin-bottom: 28px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.im-voice-msg {
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #E7F0F3;
		color: #2B2E3D;
		min-width: 160rpx;
		max-width: 400rpx;
	}

	.im-voice-msg-text {
		font-size: 22rpx;
		margin: 0 5rpx;
	}

	.cu-chat .cu-item>.main {
		max-width: calc(100% - 230rpx);
		margin: 0 14rpx;
		display: flex;
		align-items: center;
	}

	.course-video {
		max-width: 400rpx;
		overflow: hidden;
		position: relative;
		max-height: 360rpx;
	}

	.video-model {
		background-color: #3838388f;
		z-index: 10000;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		overflow: hidden;
		;
	}

	.close-model {
		position: absolute;
		top: 180rpx;
		right: 20rpx;
		background-color: #3838388f;
		padding: 4rpx 10rpx
	}

	.video-box {
		width: 100%
	}

	.icon-center {
		position: absolute;
		top: 50%;
		z-index: 4;
		transform: translate(-50%, -50%);
		left: 50%;
		padding: 0 4rpx 0 6rpx;
	}

	.relative-shadow {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #83838387;
		z-index: 1;
	}

	.file-card {
		width: 420rpx;
		height: 120rpx;

		.file-icon {
			width: 60rpx;
			height: 80rpx;
		}

		.file-name {
			text-align: left !important;
			width: 300rpx;
		}

		.file-size {
			text-align: left !important;
			margin-top: 8rpx;
		}
	}

	.icon-spin {
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.main .content ::v-deep uni-text,
	.main .content ::v-deep uni-text span,
	.main .content ::v-deep text,
	.main .content ::v-deep uni-rich-text {
		word-wrap: break-word !important;
		word-break: break-all !important;
	}

	.main .content ::v-deep ._block ._a {
		pointer-events: none !important;
	}

	.text-container {
		-webkit-user-select: text !important;
		user-select: text !important;
		font-size: 48rpx;
		word-wrap: break-word !important;
		text-align: left;
		line-height: 1.5;
		letter-spacing: 1.2px;
		color: #333;
	}

	::v-deep .checklist-group {
		display: grid !important;

		.checklist-box {
			padding: 20rpx;

			.checkbox__inner {
				width: 40rpx !important;
				height: 40rpx !important;
				overflow: hidden;

				.checkbox__inner-icon {
					position: absolute;
					top: -8px !important;
					left: -4px !important;
					height: 20px !important;
					width: 20px !important;
					border-right-width: 2px !important;
					border-bottom-width: 2px !important;
				}
			}

			.checklist-content {
				margin-left: 20rpx;

				.checklist-text {
					font-size: 36rpx !important;
				}

			}
		}

		.is-checked {
			.checkbox__inner {
				background-color: #18bc37 !important;
				border-color: #18bc37 !important;
			}

			.checklist-content {
				.checklist-text {
					color: #18bc37 !important;
				}

			}
		}
	}
</style>